<template>
<!--获取用户编码下拉table数据 -->
  <div>
    <el-popover
      v-model="showTable"
      placement="bottom-start"
      trigger="focus">
      <select-table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt" @db-row-click="dbRowClick" style="width:1200px">
      </select-table-ext>
      <el-input v-model="currentValue" placeholder="" slot="reference" clearable readonly></el-input>
    </el-popover>
  </div>
</template>
<script>
  import SelectTableExt from '../table-ext/table-ext';
  import TableIcon from '../table-ext/table-icon';
  export default {
    data() {
      return {
        currentValue:'',
        showTable: false,
        config:{ // 页面共通配置
          isPage: true, //是否分页
          isNo:true,
          prefixCls: 'select',
          tableHeight: '453',
          crudMapping:{
            query:{
              url: this.lib.config.host.system + '/system/sysStation/query'
            }
          }
        },
        searchForm:[
        { // 查询表单配置
          label: '岗位', //显示名
          key: 'stationName', //数据字段
          type: 'input' //类型
        },{
          label: '公司:',
          key: 'companyId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/system/cmpMgt/company/getAll',
            method: 'post',
            label: 'companyName',
            value: 'id'
          }
        },{
          label: '部门', //显示名
          key: 'deptName', //数据字段
          type: 'input' //类型
        }],
        columns:[{
          label: '公司名称',
          key: 'companyName',
          align: 'center'
        },{
          label: '部门名称',
          key: 'deptName',
          width:'300px',
          align: 'center'
        },{
          label: '岗位编码',
          key: 'stationCode',
          width:'120px',
          align: 'center'
        },{
          label: '岗位名称',
          key: 'stationName',
          align: 'center'
        }]}
    },
    props:{
      value: {
        type: String
      },
      name: {
        type: String
      }
    },
    components:{
      SelectTableExt,
      TableIcon
    },

    mounted(){
      if(this.value != ''){
        this.currentValue = this.value;
      }
    },
    methods: {
      dbRowClick(row){
        this.currentValue = row[this.name];
        // this.$emit('input', row[this.name]);
        this.$emit('on-selection-data', JSON.parse(JSON.stringify(row)));
        this.showTable = false;
      }
    },
    watch:{
      value(val){
        this.currentValue = val;
        console.log(val)
      },
      currentValue(val){
        if (val === '') {
          // this.$emit('input', '');
          this.$emit('on-selection-data', {});
        }
      }
    }
  };
</script>
